<!--上传图片组件-->
<template>
    <div>
        <div class="upload-list flex-c-c" v-for="(item,index) in uploadList">
            <img v-if="!!item.url" class="img-cover" :src="`${item.url}`+'?s='+new Date().getTime()">
            <div class="upload-list-cover flex-c-sa">
                <div class="upload-list-cover-item">
                    <i class="el-icon-zoom-in" @click="handleView(item.name, item.url)"></i>
                    <i class="el-icon-delete" @click="handleRemove(index)"></i>
                </div>
            </div>
        </div>
        <el-upload class="upload-list" v-show="this.uploadList.length < this.maxNum" ref="upload"
                   list-type="picture-card" :file-list="uploadImg" name="uploadFile"
                   :action="uploadUrl" :on-success="handleSuccess" :on-error="handleFormatError" :show-file-list="false"
                   :on-remove="handleRemove"
                   :before-upload="handleBeforeUpload" :on-preview="handlePictureCardPreview">
            <div class="upload-add flex-c-c" v-if="this.uploadList.length < this.maxNum">
                <i class="el-icon-plus"></i>
            </div>
        </el-upload>
        <el-dialog :close-on-click-modal="false" title="图片查看" class="dialog-box" :visible.sync="dialogVisible" append-to-body>
            <div class="preview-img flex-c-c">
                <img class="img-scale w100" :src="dialogImageUrl+'?s='+new Date().getTime()" alt="">
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import APIURL from "../../utils/ipconfig";

    export default {
        name: "UploadImg",
        props: ['uploadImg', 'handleImgData', 'maxNum', 'formName', 'formKeyName'],

        data() {
            return {
                BASEimgUrl: APIURL.Base_API_URL,
                imgName: '',
                fileList: this.uploadImg,
                imgUrl: '',
                visible: false,
                dialogVisible: false,
                dialogImageUrl: '',
                uploadList: [],
                upHeaders: {
                    token: this.$store.state.token,
                },
            }
        },

        computed: {
            uploadUrl() {
                return this.BASEimgUrl + `/minio/object/batch/eacs-bucket`;
            },
        },
        mounted() {
            this.uploadList = this.$refs.upload.uploadFiles || '';
        },
        updated() {
            this.uploadList = this.$refs.upload.uploadFiles || '';

        },
        methods: {
            // 父页面取消时还原图片列表
            reduceData(data) {
                this.uploadList = data
            },
            // 预览
            handleView(name, url) {
                this.dialogImageUrl = url;
                this.dialogVisible = true;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 删除
            handleRemove(index) {
                this.$refs.upload.uploadFiles.splice(index, 1);
                this.uploadList = this.$refs.upload.uploadFiles.map(i => {
                    return {
                        name: i.name,
                        url: this.BASEimgUrl + '/minio/download' + i.path,
                    }
                });
                this.$emit('handleImgData', this.formName, this.formKeyName, this.uploadList);
            },

            // uploadImgUrl:"+/eacs/minio/object/batch/eacs-bucket", // 上传的图片服务器地址
            // 上传成功
            handleSuccess(res, file, fileList) {
                this.uploadList = res.data.map(ele => {
                    return {
                        name: ele.bucketName,
                        url: this.BASEimgUrl + '/minio/download' + ele.path,
                    }
                })
                this.$emit('handleImgData', this.formName, this.formKeyName, this.uploadList);
            },
            handleFormatError(file) {
                this.$message.warning(`${file.name}样式不符合，请选择jpg或者png格式的文件！`)
            },
            handleBeforeUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                if (!this.maxNum) {
                    this.maxNum = 99;
                }
                const check = this.uploadList.length <= this.maxNum;
                if (!check) {
                    this.$message.warning(`最多上传${this.maxNum}张图片！`)
                }
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                return check && isJPG;
            },
        },
    }
</script>

<style lang="scss" scoped>
    .upload-list {
        width: 150px;
        height: 150px;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
        position: relative;
        margin: 3px 6px 3px 0;
    }

    .upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
        .upload-list-cover-item{
            text-align: center;
            line-height: 150px;
        }
    }
    /*.upload-list.flex-c-c{*/
    /*    img{*/
    /*        width: 100%;*/
    /*    }*/
    /*}*/
    .upload-list:hover {
        .upload-list-cover {
            display: block;

            .upload-list-cover-item {
                text-align: center !important;
                line-height: 150px !important;
            }
        }
    }

    .upload-list-cover i {
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        margin: 0 2px
    }

    .upload-add {
        width: 146px;
        height: 146px;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        text-align: center;
        line-height: 146px;

        &:hover {
            border-color: #409EFF;
            color: #409EFF;
        }
    }

    .preview-img {
        width: 100%;
        height: 100%;
    }

    > > > .el-upload--picture-card {
        border: none;
        background: transparent;
    }
</style>
